// pages/songDetail/songDetail.js
import Pubsub from 'pubsub-js'
import request from '../../utils/request.js';
import moment from 'moment'
const appInstance = getApp();//获取全局实例
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false,
    songId: '',
    songDetail: {},
    musicLink: '',
    currentTime: '00:00',//实时时间
    durationTime: "00:00", //总时长,
    currentWidth: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let songId = options.id;
    // 进入页面判断是否需要播放  当全局中的isMusicPlay为true且全局的songId===新打开页面的id时说明，播放的是上首歌 状态为true
    if (appInstance.globalData.isMusicPlay && appInstance.globalData.songId == songId) {
      this.setData({
        isPlay: true
      })
    }
    //options接收传递的参数

    this.setData({
      songId
    });
    this.getSongData();
    // 如果用户操作系统的控制音乐播放/暂停的按钮，页面不知道，导致页面显示和用户播放的状态和真实的音乐播放状态不一致。
    // 解决方案
    // 通过backgroundAudioManager去监视音乐播放/暂停
    //创建音乐播放的实例
    this.backgroundAudioManager = wx.getBackgroundAudioManager();
    // 监听音乐播放/暂停/结束
    this.backgroundAudioManager.onPlay(() => {
      this.changePlay(true)
      // 修改全局音乐播放的状态
      appInstance.globalData.isMusicPlay = true;
      appInstance.globalData.songId = songId;
    });
    this.backgroundAudioManager.onPause(() => {
      this.changePlay(false)
      // 修改全局音乐播放的状态
      appInstance.globalData.isMusicPlay = false;
      appInstance.globalData.songId = songId;
    });
    this.backgroundAudioManager.onStop(() => {
      this.changePlay(false)
      // 修改全局音乐播放的状态
      appInstance.globalData.isMusicPlay = false;
      appInstance.globalData.songId = songId;
    });

    // 监听音乐实时播放的进度
    this.backgroundAudioManager.onTimeUpdate(() => {
      // 格式化实时播放的时间
      // this.backgroundAudioManager.currentTime获取实时播放的时间
      let currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format('mm:ss');
      let currentWidth = this.backgroundAudioManager.currentTime / this.backgroundAudioManager.duration * 450
      this.setData({
        currentTime,
        currentWidth: currentWidth
      })
    });
    // 监听音乐播放自然结束
    this.backgroundAudioManager.onStop(() => {
      // 1.自动切换至下一首音乐，并且自动播放
      Pubsub.publish('switchType', 'next');
      // 将实时进度条的长度还原成0
      this.setData({
        currentWidth: 0,
        currentTime: '00:00'
      })

    })
  },
  changePlay(isPlay) {
    this.setData({
      isPlay
    })
  },
  // 点击按钮改变isPlay
  play() {
    let isPlay = !this.data.isPlay;
    // this.setData({
    //   isPlay
    // })
    let { musicLink } = this.data;
    this.musicControl(isPlay, musicLink)
  },
  // 获取歌曲详细数据
  async getSongData() {
    let res = await request('/song/detail', { ids: this.data.songId })
    console.log(res)
    let timess = res.songs[0].dt;
    let durationTime = moment(timess).format('mm:ss')
    this.setData({
      songDetail: res,
      durationTime
    });
    // 获取到数据后动态修改当前页标题
    wx.setNavigationBarTitle({
      title: this.data.songDetail.songs[0].name
    })

  },
  // 控制音乐播放/暂停的功能函数
  async musicControl(isPlay, musicLink) {// 获取歌曲数据源
    if (isPlay) {//如果点击了播放
      if (!musicLink) {
        // 获取歌曲数据源
        let musicInfo = await request('/song/url', { id: this.data.songId })
        musicLink = musicInfo.data[0].url;
        this.setData({
          musicLink
        })
      }

      this.backgroundAudioManager.src = musicLink;
      this.backgroundAudioManager.title = this.data.songDetail.songs[0].name;

    } else {//如果点击了暂停
      this.backgroundAudioManager.pause()
    }
  },
  // 点击上一首/下一首播放歌曲
  handleSwitch(event) {
    let type = event.currentTarget.id;
    this.backgroundAudioManager.stop()
    // console.log(event.currentTarget.id)
    // 订阅消息  获取musicID
    Pubsub.subscribe('musicId', (msg, musicId) => {
      console.log(musicId)
      this.setData({
        songId: musicId
      })
      // 获取音乐信息
      this.getSongData()
      // 控制音乐播放
      this.musicControl(true)
      // 取消订阅
      Pubsub.unsubscribe('musicId')
    })

    // 发布消息  将 ‘pre’ / ‘next’传递给recommendSong页面
    Pubsub.publish('switchType', type)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})